<template>
  <view>
    <!-- 1.0 导航栏 -->
    <nav-bar></nav-bar>

    <!-- 2.0 分段器 -->
    <view>
      <uni-segmented-control
        :current="current"
        :values="items"
        @clickItem="onClickItem"
        style-type="text"
        active-color="#eb4450"
      ></uni-segmented-control>
      <view class="content">
        <view v-if="current === 0">
          <navigator
            v-for="item in goodsList"
            :key="item.goods_id"
            :url="'/pages/good_details/index?good_id=' + item.goods_id"
          >
            <view class="goods_img">
              <image
                mode="widthFix"
                :src="
                  item.goods_small_logo ||
                    'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1197362953,3835376075&fm=26&gp=0.jpg'
                "
              ></image>
            </view>

            <view class="goods_info">
              <view class="goods_title">
                {{ item.goods_name }}
              </view>
              <view class="goods_price"> ￥{{ item.goods_price }} </view>
            </view>
          </navigator>
        </view>
        <view v-if="current === 1">
          选项卡2的内容
        </view>
        <view v-if="current === 2">
          选项卡3的内容
        </view>
      </view>
    </view>
  </view>
</template>

<script>
/*
1 事件
 1 页面下拉刷新
 2 页面上拉加载下一页
 3 关键
   1 页面配置开启页面下拉属性的属性 enablePullDownRefresh
   2 监听用户下拉动作 Page页面的生命周期:onPullDownRefresh
   3 页面上拉触底事件的处理函数 Page页面的生命周期 onReachBottom

2 上拉加载下一页
 1 触发页面上拉事件
 2 一定有下一页的数据吗?
   1 判断 翻页的页数是否大于实际的总页数
      1 否, 照常发送加载请求
      2 是, 弹出没有下一页的提示
   2 翻页的总数 this.params.pagenum
        实际的总页数 Math.ceil(res[1].data.message.total/this.params.pagesize)
 3 下一页的数据
   1 页码 递增 ++
   2 重新发送请求获取下一页的数据
   3 数据回来了，应该在旧数据的基础上拼接

 3 下拉刷新
  1 触发页码下拉事件
  2 真实的数据 页码应该如何变化 才会感觉起来 像是主动点击刷新按钮
    1 重新发送请求即可,但若用户上拉加载到10页时,再调用请求数据,页码则会拼接第十页的数据
    2 正确的处理
      1 将页码重置到第一页
      2 旧的页面数据组清空
    3 优化处理
      1 下拉刷新出现页面空白,正确处理:数据请求回来后再清空旧的页面数据组
        1 不是每一次请求都需要清空数据 加判断即可
        2 上拉加载下一页数据时,拼接旧数据
        3 下拉刷新时,才需要清空数据

*/

import NavBar from "@/components/Navbar";
import { uniSegmentedControl } from "@dcloudio/uni-ui";
export default {
  components: { NavBar, uniSegmentedControl },
  data() {
    return {
      items: ["综合", "销量", "价格"],
      current: 0,
      params: {
        query: "", //查询关键字  模糊查询的暂时用不到
        cid: "", //分类商品的id
        pagenum: 1, //页码 请求第几页
        pagesize: 10 //页容量 每一页要几条数据
      },
      goodsList: [], // 商品数据
      pageTotal: "" // 总页数
    };
  },
  methods: {
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
      }
    },

    // 获取商品列表
    // isRefresh = false,默认发送请求时无刷新状态
    async getList(isRefresh) {
      const res = await this.request({
        url: "/goods/search",
        data: this.params
      });

      // console.log(res[1].data.message); //封装前
      // console.log(res);  //封装后

      if (isRefresh) {
        // 清空数据,实际上就是不拼接数据，直接根据返回值渲染即可
        this.goodsList = res.goods;
      } else {
        // 不用清空数据,拼接每页数据
        this.goodsList = [...this.goodsList, ...res.goods];
      }

      // 总页数
      this.pageTotal = Math.ceil(
        res.total / this.params.pagesize
      );

      // 将现有对象转为 Promise 对象，Promise.resolve方法就起到这个作用
      return Promise.resolve();
    },

    onLoad(option) {
      const id = option.id || 5;
      this.params.cid = id;
      this.getList();
    },

    // 页面下拉动作
    async onPullDownRefresh() {
      // console.log("用户下拉页面了");
      this.params.pagenum = 1;
      // this.goodsList = [];
      // 需要清空数据
      await this.getList(true);

      uni.stopPullDownRefresh();

      uni.showToast({
        title: "刷新成功",
        icon: "success",
        duration: 2000
      });
    },

    // 滚动条触底
    onReachBottom() {
      // console.log("用户上拉加载下一页数据了");

      if (this.params.pagenum >= this.pageTotal) {
        // console.log("没有了");
        uni.showToast({
          title: "没有下一页啦！",
          icon: "none",
          duration: 2000
        });
      } else {
        this.params.pagenum++; // 加载一次，页码数加1
        this.getList(false);
      }
    }
  }
};
</script>

<style lang="scss">
.content {
  navigator {
    display: flex;
    border-bottom: 1rpx solid #ccc;
    padding: 20rpx 0;
    .goods_img {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        height: 191rpx;
        width: 80%;
      }
    }
    .goods_info {
      flex: 2;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .goods_title {
        @include ellipsis(2);
      }

      .goods_price {
        color: $uni-theme-color;
      }
    }
  }
}
</style>
